<template>
  <el-header class="header">
    <el-row>
      <el-col :span="4">
        <div class="name grid-content" @click="goView(1)">Captainzw</div>
      </el-col>
      <el-col :span="18">
        <div class="nav">
          <div class="gird-content el-icon-s-home" @click="goView(1)">
            <span>首页</span>
          </div>
          <div class="gird-content el-icon-menu" @click="goView(2)">
            <span>清单</span>
          </div>
          <div class="gird-content el-icon-s-comment" @click="goView(3)">
            <span>留言板</span>
          </div>
          <div class="gird-content iconfont icon-shang" @click="goView(4)">
            <span>赞赏</span>
          </div>
          <div class="gird-content el-icon-more" @click="goView(5)">
            <span>关于</span>
          </div>
          <div class="gird-content iconfont icon-gitee-fill-round">
            <span>我的gitee</span>
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="search el-icon-search"></div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: "MyHeader",
  props: ["changeView"],
  data() {
    return {
      baseUrl: "/",
    };
  },
  methods: {
    goView(index) {
      this.changeView(index);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  background-color: #e8f9fd;
  .name {
    font-weight: 700;
    font-size: 26px;
    cursor: pointer;
  }
  .nav {
    display: flex;
    justify-content: space-around;
    line-height: 60px;
    margin-left: 10%;
    margin-right: 35%;
    div {
      cursor: pointer;

      span {
        margin-left: 6px;
      }
    }
    div:hover {
      color: #59ce8f;
    }
  }
  [class*=" el-icon-"] {
    line-height: 60px;
  }
  .search {
    padding-left: 60%;
    font-size: 24px;

    cursor: pointer;
  }
  .search:hover {
    color: #59ce8f;
  }
}
</style>